<template>
  <free-list
    :showNavbar="true"
    v-model="listData"
    @query="fetchDataList"
    ref="appRef"
    :navbar="navbarOptions"
    :paging="pageQuery"
    bgType="image"
  >
    <template #top>
      <view class="bg-white pt-[40rpx] px-4 pb-4 mt-[20rpx] rounded-t-3">
        <view class="flex justify-between items-center">
          <view class="text-size-4 font-600 color-text-1">账户明细</view>
          <wd-picker
            :columns="bussinessList"
            v-model="typeValue"
            use-default-slot
            label-key="name"
          >
            <view
              class="flex items-center justify-center gap-[4rpx] bg-fill-1 rounded-[46rpx] color-text-2 px-[20rpx] mt-[4rpx] py-[4rpx]"
            >
              <text class="text-size-[24rpx]">{{
                bussinessListArry[typeValue].name
              }}</text>
              <image src="/static/images/icon/arrow.png" class="w-14 h-8" />
            </view>
          </wd-picker>
        </view>
      </view>
    </template>
    <view class="bg-white pt-[20rpx] px-4 flex flex-col gap-4 py-4">
      <view v-for="(item, index) in data" :key="index" class="relative">
        <inventoryCard :data="item" @click="jumpToDetail"></inventoryCard>
        <view
          class="w-full h-2 bg-fill-1 absolute bottom-[-16rpx]"
          v-show="index !== data.length - 1"
        ></view>
      </view>
    </view>
  </free-list>
</template>

<script setup>
import { ref, watch } from "vue";

import inventoryCard from "./components/inventoryCard.vue";
import {
  BUSINESS_TYPE,
  convertDictToArray,
  convertDictByField,
} from "@/utils/dict";
const navbarOptions = {
  title: "库存变动明细",
  placeholder: true,
  remark: "",
};
const columns = ref([
  "选项1",
  "选项2",
  "选项3",
  "选项4",
  "选项5",
  "选项6",
  "选项7",
]);
const appRef = ref();
const pageQuery = ref({
  pageNo: 1,
  size: 20,
});
const typeValue = ref(BUSINESS_TYPE.ALL.value);
const bussinessList = convertDictToArray(BUSINESS_TYPE);
const bussinessListArry = convertDictByField(BUSINESS_TYPE, "value");
const listData = ref([]);
const data = ref(
  new Array(2).fill(null).map(() => ({
    imgUrl: "/static/images/temp/logo.png",
    order: "12313123123",
    time: "2024.11.01 13:21:05",
    price: -20,
    nowPrice: 20000,
    type: 1,
  }))
);
watch(
  () => typeValue.value,
  (newValue) => {
    appRef.value?._pagingRef?.reload();
  }
);
const fetchDataList = async (nextPage) => {
  console.log(nextPage);
  pageQuery.value.pageNo = nextPage;
  //   try {
  // const { data } = await getWatchList(
  //     {
  //         search: {
  //             latitude: location.latitude ?? null,  // 传递null或实际值
  //             longitude: location.longitude ?? null,
  //             ...searchQuery.value,
  //             startTime: searchQuery.value.date[0],
  //             endTime: searchQuery.value.date[1],
  //             date: null
  //         }, nextPage: pageQuery.value.nextPage, size: pageQuery.value.size
  //     },
  // );
  console.log(data.value);
  appRef.value?._pagingRef?.complete(data.value);
  //   } catch (error) {
  //     appRef.value?.$pagingRef?.complete(false);
  //   }
};
const jumpToDetail = (id) => {
  console.log(id);
};
</script>

<style lang="scss" scoped></style>
